
import { Image } from '@tarojs/components'
import dayjs from 'dayjs'
import classNames from 'classnames'
import styles from './index.module.less'
import { resizeImgUrl } from '@/common/utils'
import { getSubDesc } from '@/common/utils'
import { useMovieStore } from '@/common/hox/movieStore'

type OrderConfirmMovieTitlePropsType = {
  className?: string
}
function OrderConfirmMovieTitle(props: OrderConfirmMovieTitlePropsType) {
  const { className } = props
  const {
    cinema: { cinemaInfo },
    movie: { movieDetail },
    schedule: { scheduleDetail },
    seat: { seatList, seatTotalPrice },
  } = useMovieStore(store => [
    store.movie.movieDetail,
    store.schedule.scheduleDetail,
    store.seat.seatList,
    store.seat.seatTotalPrice,
    store.cinema.cinemaInfo
  ])
  if (!movieDetail || !scheduleDetail || !cinemaInfo) return null

  return (
    <div className={classNames(className)}>
      <div className={styles.movieTitle}>
        <Image className={styles.pic} src={resizeImgUrl(movieDetail.picUrl)} mode='aspectFill' />
        <div className={styles.detail}>
          <div className={styles.title}>
            <div className={styles.titleText}>
              {movieDetail.name}
            </div>
            <div className={styles.ticketNum}>
              共<span className={styles.num}>{seatList.length}</span>张
            </div>
          </div>
          <div className={styles.row}>
            <div className={classNames(styles.dec, styles.time)}>
              {getSubDesc(scheduleDetail.showTime, true)}
              <span className={styles.black}> {dayjs(scheduleDetail.showTime).format('HH:mm')} 开场&nbsp;</span>
              {scheduleDetail?.showVersionType ? decodeURIComponent(scheduleDetail?.showVersionType) : null}
            </div>
            <div className={classNames(styles.dec, styles.lineThrough)}>
              ￥{seatTotalPrice.totalOfficialPrice}
            </div>
          </div>
          <div className={styles.dec}>
            {cinemaInfo.cinemaName}
          </div>
          <div className={styles.dec}>
            {scheduleDetail.hallName}
          </div>
          <div className={styles.dec}>
            {seatList.map(({ seatNo }) => <span key={seatNo} className={styles.seatNo}>{ seatNo }</span>)}
          </div>
        </div>
      </div>
      <div className={styles.line}></div>
      <div className={styles.ruleBox}>
        <div className={styles.rule}>
          <div className={styles.item}>
            <Image className={styles.icon} src='https://fulu-media.oss-cn-hangzhou.aliyuncs.com/public/icon/pajamas--issue-close.png' />
          &nbsp;不支持退票
          </div>
          <div className={styles.item}>
            <Image className={styles.icon} src='https://fulu-media.oss-cn-hangzhou.aliyuncs.com/public/icon/pajamas--issue-close.png' />
          &nbsp;不支持改签
          </div>
        </div>
        
      </div>
    </div>
  )
}

export default OrderConfirmMovieTitle